Stella me preguntaba hace unos días la forma de añadir una imagen en los títulos de las páginas estáticas, la respuesta la di en los mismos comentarios pero a veces no solemos reparar en ellos así que veremos como hacerlo y de paso nos divertimos que es de lo que se trata. Trabajaremos siempre en la hoja de estilos es decir añadiremos los cambios antes de ]]></b:skin>
Conseguiremos color de fondo y esquinas redondeadas, en los títulos de las páginas añadiendo:
#PageList1 {
width: 100%;
}
#PageList1 ul li a {
color:#fff;
background:#000;
text-decoration: none;
font-weight: bold;
font-size: 15px;
padding: 8px 8px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #cc6666;
}
#PageList1 ul li a:hover {
color:#000;
position: relative;
background:#fff;
left: 1px;
top: 1px;
}
Si lo que deseamos es que muestre una imagen de fondo:
#PageList1 {
width: 100%;
}
#PageList1 ul li a {
text-decoration: none;
font-weight: bold;
font-size: 12px;
border: 1px solid #000;
padding: 10px 18px 10px;
background: transparent url(url-imagen) left center no-repeat;
}
#PageList1 ul li a:hover {
position: relative;
left: 1px;
top: 1px;
}
Si optamos por dejar sólo texto podemos añadirle sombra.
#PageList1 {
width: 100%;
}
#PageList1 ul li a {
color: #000;
font-size: 16px;
text-shadow: 0px 2px 3px #505050;
text-decoration: none;
font-weight: bold;
padding: 2px 4px;
}
#PageList1 ul li a:hover {
position: relative;
left: 1px;
top: 1px;
}
Si en lugar de personalizar los títulos deseamos que sea el fondo de todos los títulos los estilos los añadiremos en PageList1 que es el bloque donde se encuentran los títulos.
#PageList1 {
width: 100%;
background: transparent url(url-imagen);
}
Al cambiar el texto de los enlaces probablemente también nos gustaría cambiar ese texto de la primera pestaña donde dice "Página principal" lo podemos cambiar marcando para expandir la plantilla y buscando la etiqueta <data:link.title/> la localizaremos unas líneas más abajo de <b:section class='crosscol' id='crosscol'> y la sustituimos por el texto deseado por ejemplo "Inicio" "HOME" "Blog" o cualquier otro, si lo deseamos desde ahí podemos darle un estilos distinto con la etiqueta span.
Para cambiar simplemente el título lo podemos hacer desde el gadget de páginas.
En este blog de pruebas se puede ver un ejemplo.
Estamos abiertos a más ideas ¿nos cuentas?
Que tal gem@, sabes como puedo ver las estadísticas de mi blog, como la cantidad de visitas por día, sin necesidad de un widget, solo quiero verlas de vez en cuando.
muchas gracias.
orale pues queda chido asi como para tenerlo de menu
Lo que si es necesario será registrase y aportar los datos que te pedirán como la url de blog, dirección de correo y poco más.
El que estoy usando ahora mismo es http://www.statcounter.com/ y funciona muy bien
Genial, como siempre Gemit@ muchas gracias!
!!
PD: no te olvides de http://he-marvelz.blogspot.com/ para tu blog de la semana cuando tengas espacaio,
Saludos
Yo creo que lo mejor es que leas la entrada que hay sobre ese tema y así me entenderás.
http://gemablog-.blogspot.com/2009/05/blog-de-la-semana.html
Gema a ver si me puedes explicar esto que me pasa.Cuando añado un Witget en las nuevas páginas estáticas, tal cómo poner un formulario de contacto ,, no hace nada,es decir no funciona,ni se ve el formulario,pero si añado ese mismo código a una entrada normal,funciona perfectamente.Sabes a que puede ser debido.Gracias
Un besote amiga gema =) espero estes muy bien =)
Hola Gemita.
Quisiera que por favor me expliques como editar la descripcion que arroja google (en sus resultados de busqueda) de mi blog.
http://oloblogger.blogspot.com/2010/03/descripcion-del-blog-en-buscadores.html
Gema, perdón, recién veo este post!!
Lo explicaste clarísimo!
Ahora viene incluído en las plantillas nuevas, pero para las otras es necesaria la explicación!
Gracias!!
Tengo un problemam cuando personalizo el menu de paginas estaticas me sale debajo de la cabcera pero en forma vertical, como se hace para que quede horizontalmente? te agradeceria la respuesta
<div id='crosscol-wrapper' maxwidgets='1' showaddelement='yes'>
Y donde dice maxwidgets='1' añade un número mayor, según ese número será el número de gadgets que puedes añadir.
Hola gema y de nuevo un saludo especial!
Ultimamente recorro mucho tu blog en busca de esos tips de grán ayuda para nuestro blog.
Te cuento que inserte este código como tu dijiste, pero al momento de salvar y mirar el blog, no surtió ningun efecto?...que pudo haber pasado...yo tengo 4 páginas estáticas, incluyendo home.
Murl es http://leonardoediaz78.blogspot.com por si deseas revisarlo.
muchas gracias Gema...espero tu respuesta!
Ah y otra consulta Gema...como hago para que los títulos de las entradas de mi blog cambien de color cuando paso el mouse sobre ellos, asi como funciona en en el tuyo?....muchas gracias!
Sobre el efecto hover en los títulos prueba añadiendo antes de ]]></b:skin>
.post-title a:hover {
color:#000;
}
Hola GEMA...te cuento que inserte el código que me diste para los títulos despues de ]]> y tampoco me funciono. Me he dado cuenta que siempre que trato de insertar algo despues de ]]> no me funciona...que puede ser?....la plantilla que yo uso es la denim
gracias!
<style type='text/css'>
.post-title a:hover {
color:#000;
}
</style>
gracias gema!!!---insertandolo despues de ]]> si me funcionó en los subtitulos...gracias!....pero cuando inserto cosas antes...no me funciona...como para el caso de la personalización de las páginas estáticas....habrá otra forma de insertarlo?..gracias!
ya inserte nuevamente el código antes de ]]> gema! y no sucede nada...podrias apreciar por favor?...gracias!
.crosscol .PageList {
width: 100%;
}
.crosscol .PageList ul li a {
color:#fff;
background:#000;
text-decoration: none;
font-weight: bold;
font-size: 15px;
padding: 8px 8px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #cc6666;
}
.crosscol .PageList ul li a:hover {
color:#000;
position: relative;
background:#fff;
left: 1px;
top: 1px;
}
ya lo inserte antes de ]]> y nada Gema antes de...aun no funciona!
que pasara?
como te la puedo enviar?...intente anexar un fragmento de ella donde esta ]]> y no me permitio?...
forevergema(arroba)gmail.com
hola gema!...continuo con mis dudas del pq no funciona la personalización de mis páginas estáticas en el blog y encontré esta información en www.blogcatalog.com...alli colocan un código antes de ]]> < / b:skin > pero además colocan otro antes de < / head >
mira, este es el enlace completo:
http://www.blogcatalog.com/blog/templates-acessorios/d55aa366d149d00db739602b2ab072ee
el único problema es q esta en portugués, pero creo que tu sabes muy del tema para ver si lo puedes adaptar...espero tu respuesta..mil gracias!
http://elescaparatederosa.blogspot.com/2010/03/cambiar-el-diseno-de-las-paginas.html
Ay gema, esto sigue igual, bueno, ahora peor
He hecho lo que explicabas a alguien en el comentario 13-14 y ná, después hice lo de poner sombra y nada, que siguen en vertical y los puntitos esos no desaparecen buaaaaaaaaaaaaaaa
Ay Gema, lo creé con esa opción donde pone "Editar páginas" no sé si es eso lo que me preguntas.
Gema, eres un encanto, de verdad. Gracias por ser así
Te cuento que Rosa probó a poner las páginas en un blog suyo de prueba y le pasó lo mismo que a mi, me dijo que como están en pruebas que probablemente sea un fallo de la aplicación. Así que ya ves, que no tiene remedio hahaha
Muchísimas gracias de verdad, sois las dos encantadoras, si el mundo estuviera lleno de gente como vosotras sería un lugar mucho mejor.
Un besito muy grande Gema :*
Si toca esperar esperaremos
Ay Gema, yo tampoco lo entiendo porque si el código está bien debería funcionar bien ¿no? A mi me da una rabiaaaaaaaaaaa, con la ilusión que me hacían mis paginitas hehehe Yo si te apetece
te hago administradora, vas miras y... ¡vences! 
En fin, que me da verguenza seguir abusando aunque me encantaría seguir hahahaha
Un besito, me voy a mimir
Hola Gema!..noto que siguen habiendo problemas con la personalización de las páginas estáticas...en fin
Te cuento que aplique el proceso que tienes para cambiar el favicon, y a mi si se me visualiza en internet explorer, solo que no tiene el movimiento gif como se da en firefox.
Gema, quisiera consultarte si tu sabes como puedo hacer para eliminar las fechas del gadget de archivos del blog, para que solo aparezcan mis entradas sin ser clasificadas por fechas.
Como siempre, gracias por tus acertados consejos!
Gracias corazón, voy a estar un día fuera así que te quedas con el timón. Bueno, espero saber hacerlo
Creo que ya, te mandé una invitación ¿es así verdad?
Gema, eso que tu me sugieres de hacerlo manualmente es con el gadget de enlaces?....o de que manera es que tu lo propones?
No estoy muy segura que sea eso el resultado que deseas tener.
Otra idea es añadir un mapa del sitio no sé si lo estuve hablando contigo o se trataba de otra persona, el mapa de sitio trabaja con un script, de forma automática conforme dse va actualizando el blog las entradas se van mostrando en grupos según la etiqueta, es muy simple de añadir y puedes ver el resultado en el menú que hay sobre el banner donde dice Mapa del sitio.
Si te decides a ponerlo puedes seguir estos pasos:
http://gemablog-.blogspot.com/2009/11/anadir-un-sitemaps-o-mapa-del-sitio.html
ok muchisimas gracias Gema! ya lo hice listando enlaces...gracias!
Ya está gem@
Hola Gema de nuevo, me ocurre como a 1020 AM en mi blog que tengo el header dividido (siguiendo tus instrucciones) si coloco el menu de paginas estaticas donde ahora tengo un menu "normal" me sale en forma de lista y no de pestañas.
Lo tengo así en http://icp-cirugiaestetica.blogspot.com/
Solo consigo que aparezca en forma de pestañas bajo la cabecera (En el croscoll) o en el footer. ¿sabes como podría ponerlo en el header? ¿o es imposible hacerlo?
Tengo una entrada en borrador si no tienes mucha prisa para mañana le doy salida y ahí explico la forma de hacerlo.
No te preocupes tengo todo el tiempo del mundo. No se me había ocurrido enlazar las páginas estáticas. A veces la solución es lo más sencillo.
BUENO...PRIMERO QUE NADA HOLA ....ME GUSTO MUCHO TU POST...AUNQUE SOY ESTUDIANTE DE PROGRAMACION..
VISUAL BASIC...C++..Y CODIGOS POCO RELACIONADOS CON INTERNET, Y PUES NO ESTA DE MAS PEDIR HAYUDA Y ALGUNOS CONSEJOS...Y PUES TENGO UN BLOG.. Y LAS SECCIONES DE ESTE SON OTROS BLOGS UNIDOS POR LINKS EN IMAEGES...DESPUES ME ENTERE DE LO DE LAS PAGINAS FIJAS... Y PUES QUISIERA PASAR EL CONTENIDO DE TODOS ESOS BLOGS A UNO SOLO POR MEDIO DE LAS PAGINAS ESTATICAS...ESE NO ES EL PROBLEMA...SI NO QUE QUISIERA QUE LOS LINKS DE LA LISTA DE PAGINAS INDEPENDIENTES FUERAN IMAGENES DIFERENTES...YA QUE AL MODIFICAR EL CODIGO QUE PROPORCIONAS ES LA MISMA IMAGEN PARA TODOS LOS LINKS...ESPERO Y PUEDAS AYUDARME.
HOLA,
tengo una duda: porque Google en el resultado cuando muestra mi entrada solo incluye el titulo de la entrada y la descripcion general del blog. esta es una captura de mi entrada: http://dl.dropbox.com/u/11548740/NUCLEA.JPG como notaras puse un determinado texto. y esto es lo que me sale en google: http://dl.dropbox.com/u/11548740/GOONUCLE.JPG quesiera que tambien saliera el contenido escrito de mi entra 
y en esta entrada que encontre buscando como ejemplo si aparece el contenido de la entrada: http://dl.dropbox.com/u/11548740/comic.JPG
mi blog es http://www.nuclearcomic.com/ y mi plantillas es: http://dl.dropbox.com/u/11548740/ayudaaaaa.xml agradeceria me pudiera ayudar en revizar que es lo qeu sucede, si pudieras plis
http://vagabundia.blogspot.com/2010/09/los-enlaces-de-sitios-de-google.html
Y si queremos colocar imagenes DIFERENTES por CADA título de página estática? Cómo debería ser el código?
http://macrossvoxp.blogspot.com/ Fijate lo que hice... está en construcción igual. Pero me gustaría poder colocar una imagen diferente.
Gracias Gem@.
Buenas
)
Me ha sido de mucha ayuda esta entrada, ya que llevo un tiempo buscando como hacer esto, aunque se me presentó un problemilla que no consigo reparar ( soy aun muy novato en esto
El problemilla es que no consigo hacer parte de gadget invisible, como verás en mi blog,en el gadget de páginas estaticas ( justo debajo del logo) a su derecha, se me queda un trocito en blanco que no consigo rellenar, y por ende si añado más paginas estaticas y se dobla la fila de ellas, ese trocito se multiplica en un gran trozo bastante notable
Este es mi blog "http://adoptarunamigo.blogspot.com/"
Si puedes pasarte, hecharle un vistazo y decirme como arreglarlo te estaria muy agradecido.
Saludos!
#PageList1 ul li a {
background: none repeat scroll 0 0 #8A5322;
border: 1px solid #8A5322;
border-radius: 0 0 0 0;
color: #EFDA87;
font-size: 13.5px;
font-weight: bold;
padding: 10px 5px;
text-decoration: none;
margin-left: 12px;
}
#PageList1 {
background: none repeat scroll 0 0 #8A5322;
width: 950px;
}
bueno personalice las paginas pero me encontre con un problema, no puedo suprimir el espacio que hay entre un titulo y otro, en #PageList1 ul li a probre agregando margin:0px; pero sigue estando el molesto espacio...
XImageTransform.Microsoft.gradient( startColorstr='#3399bb', endColorstr='#015782',GradientType=0 ); /* ie */
XImageTransform.Microsoft.gradient( startColorstr='#2488a9', endColorstr='#003d5c',GradientType=0 ); /* ie */
te muestro el codigo de las paginas:
/*inicio diseño de las paginas...krone*/
#PageList1 {
/*estilo...krone*/
padding:0 0 0 10px;
width: 99%;
height:30px;
margin:0 0 10px 0px;
background: #a9e4f7; /* old browsers */
background: -moz-linear-gradient(top, #3399bb 2%, #015782 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#3399bb), color-stop(100%,#015782)); /* webkit */
filter: progid
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px
}
#PageList1 li {
margin: 0 0 0 0px;
}
#PageList1 li a {
/*estilos para los enlaces...Krone*/
display: block;
height:30px;
padding: 6px 5px 4px 5px;
text-decoration: none;
text-align: center;
text-shadow: 1px 0px 1px #c8c8c8;
color: #121212;
text-shadow: 1px 1px 1px #333333;
}
#PageList1 ul li a {
margin-left: 0px;
margin-right: 0px;
}
#PageList1 li a:hover {
/*efecto al poner el puntero sobre el enlace...krone*/
background: #a9e4f7; /* old browsers */
background: -moz-linear-gradient(top, #2488a9 2%, #003d5c 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#2488a9), color-stop(100%,#003d5c)); /* webkit */
height:30px;
padding-top:10px
filter: progid
text-shadow: 1px 1px 1px #777;
}
/*finalizo diseño de las paginas...krone*/
La verdad...me estoy volviendo loco si me podes ayudar seria genial!
bueno personalice las paginas pero me encontre con un problema, no puedo suprimir el espacio que hay entre un titulo y otro, en #PageList1 ul li a probre agregando margin:0px; pero sigue estando el molesto espacio...
XImageTransform.Microsoft.gradient( startColorstr='#3399bb', endColorstr='#015782',GradientType=0 ); /* ie */
XImageTransform.Microsoft.gradient( startColorstr='#2488a9', endColorstr='#003d5c',GradientType=0 ); /* ie */
te muestro el codigo de las paginas:
/*inicio diseño de las paginas...krone*/
#PageList1 {
/*estilo...krone*/
padding:0 0 0 10px;
width: 99%;
height:30px;
margin:0 0 10px 0px;
background: #a9e4f7; /* old browsers */
background: -moz-linear-gradient(top, #3399bb 2%, #015782 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#3399bb), color-stop(100%,#015782)); /* webkit */
filter: progid
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px
}
#PageList1 li {
margin: 0 0 0 0px;
}
#PageList1 li a {
/*estilos para los enlaces...Krone*/
display: block;
height:30px;
padding: 6px 5px 4px 5px;
text-decoration: none;
text-align: center;
text-shadow: 1px 0px 1px #c8c8c8;
color: #121212;
text-shadow: 1px 1px 1px #333333;
}
#PageList1 ul li a {
margin-left: 0px;
margin-right: 0px;
}
#PageList1 li a:hover {
/*efecto al poner el puntero sobre el enlace...krone*/
background: #a9e4f7; /* old browsers */
background: -moz-linear-gradient(top, #2488a9 2%, #003d5c 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#2488a9), color-stop(100%,#003d5c)); /* webkit */
height:30px;
padding-top:10px
filter: progid
text-shadow: 1px 1px 1px #777;
}
/*finalizo diseño de las paginas...krone*/
La verdad...me estoy volviendo loco si me podes ayudar seria genial!
bueno personalice las paginas pero me encontre con un problema, no puedo suprimir el espacio que hay entre un titulo y otro, en #PageList1 ul li a probre agregando margin:0px; pero sigue estando el molesto espacio...
XImageTransform.Microsoft.gradient( startColorstr='#3399bb', endColorstr='#015782',GradientType=0 ); /* ie */
XImageTransform.Microsoft.gradient( startColorstr='#2488a9', endColorstr='#003d5c',GradientType=0 ); /* ie */
mi blog para que veas las paginas es foundincloud.blogspot.com
te muestro el codigo de las paginas:
/*inicio diseño de las paginas...krone*/
#PageList1 {
/*estilo...krone*/
padding:0 0 0 10px;
width: 99%;
height:30px;
margin:0 0 10px 0px;
background: #a9e4f7; /* old browsers */
background: -moz-linear-gradient(top, #3399bb 2%, #015782 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#3399bb), color-stop(100%,#015782)); /* webkit */
filter: progid
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px
}
#PageList1 li {
margin: 0 0 0 0px;
}
#PageList1 li a {
/*estilos para los enlaces...Krone*/
display: block;
height:30px;
padding: 6px 5px 4px 5px;
text-decoration: none;
text-align: center;
text-shadow: 1px 0px 1px #c8c8c8;
color: #121212;
text-shadow: 1px 1px 1px #333333;
}
#PageList1 ul li a {
margin-left: 0px;
margin-right: 0px;
}
#PageList1 li a:hover {
/*efecto al poner el puntero sobre el enlace...krone*/
background: #a9e4f7; /* old browsers */
background: -moz-linear-gradient(top, #2488a9 2%, #003d5c 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#2488a9), color-stop(100%,#003d5c)); /* webkit */
height:30px;
padding-top:10px
filter: progid
text-shadow: 1px 1px 1px #777;
}
/*finalizo diseño de las paginas...krone*/
La verdad...me estoy volviendo loco si me podes ayudar seria genial!
Podemos añadir un valor negativo en margin y eso disminuirá ese espacio entre enlaces.
#PageList1 li {
border: medium none;
margin: 0 -20px 0 0;
}
bueno,
gracias funciono perfecto 
no se me había ocurrido 
gracias
"la etiqueta la localizaremos unas líneas más abajo de y la sustituimos por el texto deseado por ejemplo "Inicio" "HOME" "Blog" o cualquier otro, si lo deseamos desde ahí podemos darle un estilos distinto con la etiqueta span"
Lo he releído treinta veces y nada, no lo consigo y debajo me aparecen cuatro data:link.title/.He cambiado el nombre al que aparece justo debajo de "crosscol", pero no se si debo cambiárselo a las cuatro referencias.
Si alguien me puede ayudar....saludos
Nota: solo los miembros de este blog pueden publicar comentarios.